<script setup lang="ts">
// 查询可预约的咨询师
import {availableTeacher} from "@/http/reservation/reservation";






</script>

<template>
    <div class="whole">
        <div class="title">
            <van-icon name="friends-o" size="20" style="margin-right: 3px"/>
            <span>选择咨询师</span>
        </div>
        <div class="allTeacher">
            <div class="eachTeacher" v-for="item in teacherList" :key="item.id">
                <div class="pic">
                    <img :src="baseUrl+item.avatar" alt="">
                </div>
                <div class="name">{{ item.name }}</div>
                <button>查看</button>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.whole {
  width: 90%;
  margin: 0 auto;

  .allTeacher {
    width: 100%;
    white-space: nowrap;
    overflow: auto;
    display: flex;
    justify-content: space-between;
    margin: 2vh 10px;

    .eachTeacher {
      border-radius: 10px;
      margin-right: 15px;
      height: 25vh;
      padding: 20px;
      width: 38%;
      background-color: white;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      flex-wrap: wrap;
      justify-content: space-evenly;
      text-align: center;

      .pic {
        height: 7vh;
        width: 50%;
        margin: 0 auto;

        img {
          border-radius: 50%;
          width: 100%;
          height: 100%;
        }
      }

      button {
        width: 65%;
        margin: 0 auto;
        border: none;
        height: 4vh;
        border-radius: 2vh;
        color: #7246c5;
        background-color: #ECE2F8;
      }
    }
  }
}
</style>